<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<title>活动安全监管平台</title>

	<meta name="keywords" content="声纹识别,多维身份认证,中证宝科技,声纹采集仪,声纹采集终端,声纹采集设备,声纹采集器">
	<meta name="description" content="中证宝科技，是一家高科技创新型企业，基于人工智能技术的多维身份识别与认证一站式系统集成服务及技术提供商。公司专注于生物识别领域，掌握了世界领先的人工智能与机器学习算法，在声纹识别、语音识别、人脸识别、关键词检索、语种识别、音频指纹、活体检测等方面，中证宝拥有完全自主知识产权。">

	<link rel="stylesheet" href="a/css/a.css">
	<link rel="stylesheet" href="a/css/cong.css">


	<link rel="stylesheet" href="a/css/line.css">

</head>
<body>

<div id="app">

<header>
	活动安全监管平台
</header>

<div class="pa top30 right30 white">
	<a href="javascript:;" @click="退出()">退出</a>
</div>

<div style="min-width: 1000px; padding: 60px 30px 0;">

	<div class="fl" style="width: 24%;">

		<div class="box" style="height: 350px; background: url(index.files/map.gif) center; background-size: cover;">

			<div class="line">
				<i class="t_l"></i>
				<i class="t_r"></i>
				<i class="l_t"></i>
				<i class="l_b"></i>
				<i class="r_t"></i>
				<i class="r_b"></i>
				<i class="b_l"></i>
				<i class="b_r"></i>
			</div>

			<div class="title">
				活动示意图
			</div>

		</div>

		<div class="h40"></div>

		<div class="box" style="height: 350px; background: url(index.files/door.jpg) center; background-size: cover;">

			<div class="line">
				<i class="t_l"></i>
				<i class="t_r"></i>
				<i class="l_t"></i>
				<i class="l_b"></i>
				<i class="r_t"></i>
				<i class="r_b"></i>
				<i class="b_l"></i>
				<i class="b_r"></i>
			</div>

			<div class="title">
				门区图像
			</div>

		</div>

	</div>

	<div class="fr" style="width: 24%;">

		<div class="box" style="height: 350px;">

			<div class="line">
				<i class="t_l"></i>
				<i class="t_r"></i>
				<i class="l_t"></i>
				<i class="l_b"></i>
				<i class="r_t"></i>
				<i class="r_b"></i>
				<i class="b_l"></i>
				<i class="b_r"></i>
			</div>

			<div class="title">
				<select>
					<option selected>黑名单预警</option>
				</select>
			</div>

			<div>
				<table>
					<thead>
						<tr>
							<th>姓名</th>
							<th>身份证</th>
							<th>手机</th>
							<th>触发原因</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="v in 黑名单预警">
							<td>{{v.name}}</td>
							<td>{{v.identityCard}}</td>
							<td>{{v.mobile}}</td>
							<td>{{v.reason}}</td>
						</tr>
					</tbody>
				</table>
			</div>

		</div>

		<div class="h40"></div>

		<div class="box" style="height: 350px;">

			<div class="line">
				<i class="t_l"></i>
				<i class="t_r"></i>
				<i class="l_t"></i>
				<i class="l_b"></i>
				<i class="r_t"></i>
				<i class="r_b"></i>
				<i class="b_l"></i>
				<i class="b_r"></i>
			</div>

			<div class="title">
				<select v-model="tab2">
					<option v-for="(v,i) in tab2_list">{{v}}</option>
				</select>
			</div>

			<div class="m30">

				<div id="tab2_每日人次" class="tab2"
				style="width: 100%; height:300px;"></div>

				<div id="tab2_各入口人次" class="tab2"
				style="width: 100%; height:300px; display:none;"></div>

				<div id="tab2_男女比例" class="tab2"
				style="width: 100%; height:300px; display:none;"></div>

				<div id="tab2_年龄分布" class="tab2"
				style="width: 100%; height:300px; display:none;"></div>

				<div id="tab2_地区分布" class="tab2"
				style="width: 100%; height:300px; display:none;"></div>

			</div>

		</div>

	</div>

	<div class="ma" style="width: 48%;">

		<div style="display: flex;">

			<div style="flex: 10;">

				<div class="box tc" style="height: 100px;">

					<div class="line">
						<i class="t_l"></i>
						<i class="t_r"></i>
						<i class="l_t"></i>
						<i class="l_b"></i>
						<i class="r_t"></i>
						<i class="r_b"></i>
						<i class="b_l"></i>
						<i class="b_r"></i>
					</div>

					<div class="mt20 f32">{{实时.enterCount}}</div>
					<div class="">进入人次</div>

				</div>

			</div>

			<div style="flex: 1;"></div>

			<div style="flex: 10;">

				<div class="box tc" style="height: 100px;">

					<div class="line">
						<i class="t_l"></i>
						<i class="t_r"></i>
						<i class="l_t"></i>
						<i class="l_b"></i>
						<i class="r_t"></i>
						<i class="r_b"></i>
						<i class="b_l"></i>
						<i class="b_r"></i>
					</div>

					<div class="mt20 f32">{{实时.enterCount - 实时.leaveCount}}</div>
					<div class="">现场人次</div>

				</div>

			</div>

			<div style="flex: 1;"></div>

			<div style="flex: 10;">

				<div class="box tc" style="height: 100px;">

					<div class="line">
						<i class="t_l"></i>
						<i class="t_r"></i>
						<i class="l_t"></i>
						<i class="l_b"></i>
						<i class="r_t"></i>
						<i class="r_b"></i>
						<i class="b_l"></i>
						<i class="b_r"></i>
					</div>

					<div class="mt20 f32">{{实时.leaveCount}}</div>
					<div class="">离去人次</div>

				</div>

			</div>

		</div>

		<div class="h60"></div>

		<div class="box" style="height: 580px;">

			<div class="line">
				<i class="t_l"></i>
				<i class="t_r"></i>
				<i class="l_t"></i>
				<i class="l_b"></i>
				<i class="r_t"></i>
				<i class="r_b"></i>
				<i class="b_l"></i>
				<i class="b_r"></i>
			</div>

			<div class="title">
				<select v-model="tab1">
					<option v-for="(v,i) in tab1_list">{{v}}</option>
				</select>
			</div>

			<div class="title" style="left: inherit; right: 40px;">
				<select v-model="date">
					<option v-for="v in date_list">{{v}}</option>
				</select>
			</div>

			<div class="m30">

				<div id="tab1_进入分时统计" class="tab1"
				style="width: 100%; height:530px;"></div>

				<div id="tab1_各入口人次" class="tab1"
				style="width: 100%; height:530px; display:none;"></div>

				<div id="tab1_男女比例" class="tab1"
				style="width: 100%; height:530px; display:none;"></div>

				<div id="tab1_年龄分布" class="tab1"
				style="width: 100%; height:530px; display:none;"></div>

				<div id="tab1_地区分布" class="tab1"
				style="width: 100%; height:530px; display:none;"></div>

			</div>

		</div>

	</div>

</div>

<footer class="white tc">
	Copyright By 中证宝
</footer>


	<script src="a/plugin/jquery.js"></script>
	<script src="a/plugin/vue.js"></script>
	<script src="a/js/a.js"></script>

<script src="a/plugin/echarts.js"></script>
<script>
var app = new Vue({
	el: '#app',
	data:{
		page: 0,
		loading: 1,
		alert: '',

		实时: {
			enterCount: 0,
			leaveCount: 0,
		},

		// mchId: LS.mchId,
		date: LS.endTime,
		date_list: JSON.parse(LS.date_list),

		tab1: '进入分时统计',
		tab1_list: ['进入分时统计','各入口人次','男女比例','年龄分布','地区分布'],

		tab2: '每日人次',
		tab2_list: ['每日人次','各入口人次','男女比例','年龄分布','地区分布'],

		黑名单预警: [],

	},
	watch:{

		date(){
			// 修改日期后重新请求一次
			this.tab1_echarts(this.tab1)
		},
		tab1(who){
			// 修改类型时更换面
			$('.tab1').hide()
			$('#tab1_' + who).show()

			var that = this

			setTimeout(function(){
				that.tab1_echarts(who)
			}, 1)
		},

		tab2(who){
			// 修改类型时更换面
			$('.tab2').hide()
			$('#tab2_' + who).show()

			var that = this

			setTimeout(function(){
				that.tab2_echarts(who)
			}, 1)
		}
	},
	methods:{
		toast: function(json){
			this.alert = json
		},
		toast_close: function(){
			this.alert = ''
		},
		wx_close: function(){
			WeixinJSBridge.invoke('closeWindow',{},function(res){})
		},
		debug: function(log){
			$('.debug').html( $('.debug').html() + log + '<br>' )
		},

		退出(){
			window.localStorage.clear()
			location.href = 'index.html'
		},

		实时get(){

			var that = this

			var data = {
				reqHead:
				{
					clientType: 1,
					format: "json",
					version: "1.0",
					sign: "UCR1fIQ9lyUCR1fIQ9lyUCR1fIQ9lyUCR1y"
				},
				reqBody: {
					mchId:		LS.mchId,
					startTime:	LS.startTime,
					endTime:	LS.endTime,
				}
			}

			$.ajax({
				type:	'POST',
				url:	api + 'oftenStatisticsPeoples/interface',
				data:	JSON.stringify(data),
				dataType: 'json',
				success: function(re){

					that.实时 = re.rspBody

				}
			})

		},

		tab1_echarts(who){

			if(who == undefined) who = this.tab1

			if(who == '进入分时统计'){

				var data = {
					reqHead:
					{
						clientType: 1,
						format: "json",
						version: "1.0",
						sign: "UCR1fIQ9lyUCR1fIQ9lyUCR1fIQ9lyUCR1y"
					},
					reqBody: {
						mchId: LS.mchId,
						queryTime: this.date,
					}
				}

				$.ajax({
					type:	'POST',
					url:	api + 'intoStaffCountTime/interface',
					data:	JSON.stringify(data),
					dataType: 'json',
					success: function(re){

						var data = []
						for(var i in re.rspBody.data){
							var v = re.rspBody.data[i]
							data.push(v)
						}
						// console.log(data)

						// 基于准备好的dom，初始化echarts实例
						var myChart = echarts.init(document.getElementById('tab1_' + who))

						// 指定图表的配置项和数据
						var option = {
							grid: {
								top: '5%',
								left: '0%',
								right: '0%',
								bottom: '0%',
								containLabel: true
							},
							color: ['#FAC858'],
							xAxis: {
								data: [
									'0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23',
								],
								axisLabel: {
									textStyle: {
										color: '#fff',
									},
								},
							},
							yAxis: {
								axisLabel: {
									textStyle: {
										color: '#fff',
									},
								},
							},
							series: [{
								name: '销量',
								type: 'line',
								data: data
								//json[0].data
							}]
						}

						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option)

					}
				})

			}

			else if(who == '各入口人次'){

				var data = {
					reqHead:
					{
						clientType: 1,
						format: "json",
						version: "1.0",
						sign: "UCR1fIQ9lyUCR1fIQ9lyUCR1fIQ9lyUCR1y"
					},
					reqBody: {
						mchId: LS.mchId,
						queryTime: this.date,
					}
				}

				$.ajax({
					type:	'POST',
					url:	api + 'intoStaffCountOfInlet/interface',
					data:	JSON.stringify(data),
					dataType: 'json',
					success: function(re){

						var data = [], key = []
						if(re.rspBody.data.in != undefined){
							for(var i in re.rspBody.data.in){
								var v = re.rspBody.data.in[i]
								key.push(i)
								data.push(v)
							}
						}
						if(re.rspBody.data.out != undefined){
							for(var i in re.rspBody.data.out){
								var v = re.rspBody.data.out[i]
								key.push(i)
								data.push(v)
							}
						}
						// console.log(data)

						// 基于准备好的dom，初始化echarts实例
						var myChart = echarts.init(document.getElementById('tab1_' + who))

						// 指定图表的配置项和数据
						var option = {
							grid: {
								top: '5%',
								left: '0%',
								right: '0%',
								bottom: '0%',
								containLabel: true
							},
							color: ['#FAC858'],
							xAxis: {
								data: key,
								axisLabel: {
									textStyle: {
										color: '#fff',
									},
								},
							},
							yAxis: {
								axisLabel: {
									textStyle: {
										color: '#fff',
									},
								},
							},
							series: [{
								name: '销量',
								type: 'bar',
								data: data
								//json[0].data
							}]
						}

						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option)

					}
				})

			}

			else if(who == '男女比例'){

				var data = {
					reqHead:
					{
						clientType: 1,
						format: "json",
						version: "1.0",
						sign: "UCR1fIQ9lyUCR1fIQ9lyUCR1fIQ9lyUCR1y"
					},
					reqBody: {
						mchId: LS.mchId,
						queryTime: this.date,
					}
				}

				$.ajax({
					type:	'POST',
					url:	api + 'intoStaffSexRatio/interface',
					data:	JSON.stringify(data),
					dataType: 'json',
					success: function(re){

						var data = []
						for(var i in re.rspBody.data){
							var v = re.rspBody.data[i]
							data.push({
								name: i,
								value: v,
							})
						}
						// console.log(data)

						// 基于准备好的dom，初始化echarts实例
						var myChart = echarts.init(document.getElementById('tab1_' + who))

						// 指定图表的配置项和数据
						var option = {
							color: ['#5470C6','#EE6666'],
							legend: {
								data:['刷身份证人次','短信人次','进场人脸采集人次','离场人脸采集','计数器人次','合计人次'],
								textStyle: {
									color: '#FFF',
									fontSize: 10,
								},
							},
							series: [
								{
									// name: '访问来源',
									type: 'pie',
									radius: '50%',
									data: data,
/*									emphasis: {
										itemStyle: {
											// shadowBlur: 10,
											// shadowOffsetX: 0,
											shadowColor: 'rgba(255, 255, 255, 1)'
										}
									}*/
								}
							]
						}

						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option)

					}
				})

			}

			else if(who == '年龄分布'){

				var data = {
					reqHead:
					{
						clientType: 1,
						format: "json",
						version: "1.0",
						sign: "UCR1fIQ9lyUCR1fIQ9lyUCR1fIQ9lyUCR1y"
					},
					reqBody: {
						mchId: LS.mchId,
						queryTime: this.date,
					}
				}

				$.ajax({
					type:	'POST',
					url:	api + 'intoStaffAgeRatio/interface',
					data:	JSON.stringify(data),
					dataType: 'json',
					success: function(re){

						var data = [], key = []
						for(var i in re.rspBody.data){
							var v = re.rspBody.data[i]
							key.push(i)
							data.push(v)
						}

						// 基于准备好的dom，初始化echarts实例
						var myChart = echarts.init(document.getElementById('tab1_' + who))

						// 指定图表的配置项和数据
						var option = {
							grid: {
								top: '5%',
								left: '0%',
								right: '0%',
								bottom: '0%',
								containLabel: true
							},
							color: ['#FAC858'],
							xAxis: {
								data: key,
								axisLabel: {
									textStyle: {
										color: '#fff',
									},
								},
							},
							yAxis: {
								axisLabel: {
									textStyle: {
										color: '#fff',
									},
								},
							},
							series: [{
								name: '销量',
								type: 'bar',
								data: data
							}]
						}

						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option)

					}
				})

			}

			else if(who == '地区分布'){

				var data = {
					reqHead:
					{
						clientType: 1,
						format: "json",
						version: "1.0",
						sign: "UCR1fIQ9lyUCR1fIQ9lyUCR1fIQ9lyUCR1y"
					},
					reqBody: {
						mchId: LS.mchId,
						queryTime: this.date,
					}
				}

				$.ajax({
					type:	'POST',
					url:	api + 'intoStaffCountOfArea/interface',
					data:	JSON.stringify(data),
					dataType: 'json',
					success: function(re){

						var data = [], key = []
						for(var i in re.rspBody.data){
							var v = re.rspBody.data[i]
							key.push(i)
							data.push(v)
						}

						// 基于准备好的dom，初始化echarts实例
						var myChart = echarts.init(document.getElementById('tab1_' + who))

						// 指定图表的配置项和数据
						var option = {
							grid: {
								top: '5%',
								left: '0%',
								right: '0%',
								bottom: '0%',
								containLabel: true
							},
							color: ['#FAC858'],
							xAxis: {
								data: key,
								axisLabel: {
									textStyle: {
										color: '#fff',
									},
								},
							},
							yAxis: {
								axisLabel: {
									textStyle: {
										color: '#fff',
									},
								},
							},
							series: [{
								name: '销量',
								type: 'bar',
								data: data
							}]
						}

						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option)

					}
				})

			}

		},

		tab2_echarts(who){

			if(who == undefined) who = this.tab2

			if(who == '每日人次'){

				var data = {
					reqHead:
					{
						clientType: 1,
						format: "json",
						version: "1.0",
						sign: "UCR1fIQ9lyUCR1fIQ9lyUCR1fIQ9lyUCR1y"
					},
					reqBody: {
						mchId:		LS.mchId,
						startTime:	LS.startTime,
						endTime:	LS.endTime,
					}
				}

				$.ajax({
					type:	'POST',
					url:	api + 'activitySummaryEnterStaffCountDate/interface',
					data:	JSON.stringify(data),
					dataType: 'json',
					success: function(re){

						var data = [], key = []
						for(var i in re.rspBody.data){
							var v = re.rspBody.data[i]
							key.push(i)
							data.push(v)
						}
						// console.log(data)

						// 基于准备好的dom，初始化echarts实例
						var myChart = echarts.init(document.getElementById('tab2_' + who))

						// 指定图表的配置项和数据
						var option = {
							grid: {
								top: '5%',
								left: '0%',
								right: '0%',
								bottom: '0%',
								containLabel: true
							},
							color: ['#FAC858'],
							xAxis: {
								data: key,
								axisLabel: {
									textStyle: {
										color: '#fff',
									},
								},
							},
							yAxis: {
								axisLabel: {
									textStyle: {
										color: '#fff',
									},
								},
							},
							series: [{
								name: '销量',
								type: 'bar',
								data: data
							}]
						}

						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option)

					}
				})

			}

			else if(who == '各入口人次'){

				var data = {
					reqHead:
					{
						clientType: 1,
						format: "json",
						version: "1.0",
						sign: "UCR1fIQ9lyUCR1fIQ9lyUCR1fIQ9lyUCR1y"
					},
					reqBody: {
						mchId:		LS.mchId,
						startTime:	LS.startTime,
						endTime:	LS.endTime,
					}
				}

				$.ajax({
					type:	'POST',
					url:	api + 'activitySummaryOfInlet/interface',
					data:	JSON.stringify(data),
					dataType: 'json',
					success: function(re){

						var data = [], key = []
						if(re.rspBody.data.in != undefined){
							for(var i in re.rspBody.data.in){
								var v = re.rspBody.data.in[i]
								key.push(i)
								data.push(v)
							}
						}
						if(re.rspBody.data.out != undefined){
							for(var i in re.rspBody.data.out){
								var v = re.rspBody.data.out[i]
								key.push(i)
								data.push(v)
							}
						}
						// console.log(data)

						// 基于准备好的dom，初始化echarts实例
						var myChart = echarts.init(document.getElementById('tab2_' + who))

						// 指定图表的配置项和数据
						var option = {
							grid: {
								top: '5%',
								left: '0%',
								right: '0%',
								bottom: '0%',
								containLabel: true
							},
							color: ['#FAC858'],
							xAxis: {
								data: key,
								axisLabel: {
									textStyle: {
										color: '#fff',
									},
								},
							},
							yAxis: {
								axisLabel: {
									textStyle: {
										color: '#fff',
									},
								},
							},
							series: [{
								name: '销量',
								type: 'bar',
								data: data
								//json[0].data
							}]
						}

						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option)

					}
				})

			}

			else if(who == '男女比例'){

				var data = {
					reqHead:
					{
						clientType: 1,
						format: "json",
						version: "1.0",
						sign: "UCR1fIQ9lyUCR1fIQ9lyUCR1fIQ9lyUCR1y"
					},
					reqBody: {
						mchId:		LS.mchId,
						startTime:	LS.startTime,
						endTime:	LS.endTime,
					}
				}

				$.ajax({
					type:	'POST',
					url:	api + 'activitySummarySexRatio/interface',
					data:	JSON.stringify(data),
					dataType: 'json',
					success: function(re){

						var data = []
						for(var i in re.rspBody.data){
							var v = re.rspBody.data[i]
							data.push({
								name: i,
								value: v,
							})
						}

						// 基于准备好的dom，初始化echarts实例
						var myChart = echarts.init(document.getElementById('tab2_' + who))

						// 指定图表的配置项和数据
						var option = {
							color: ['#5470C6','#EE6666'],
							legend: {
								data:['刷身份证人次','短信人次','进场人脸采集人次','离场人脸采集','计数器人次','合计人次'],
								textStyle: {
									color: '#FFF',
									fontSize: 10,
								},
							},
							series: [
								{
									// name: '访问来源',
									type: 'pie',
									radius: '50%',
									data: data,
/*									emphasis: {
										itemStyle: {
											// shadowBlur: 10,
											// shadowOffsetX: 0,
											shadowColor: 'rgba(255, 255, 255, 1)'
										}
									}*/
								}
							]
						}

						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option)

					}
				})

			}

			else if(who == '年龄分布'){

				var data = {
					reqHead:
					{
						clientType: 1,
						format: "json",
						version: "1.0",
						sign: "UCR1fIQ9lyUCR1fIQ9lyUCR1fIQ9lyUCR1y"
					},
					reqBody: {
						mchId:		LS.mchId,
						startTime:	LS.startTime,
						endTime:	LS.endTime,
					}
				}

				$.ajax({
					type:	'POST',
					url:	api + 'activitySummaryAgeRatio/interface',
					data:	JSON.stringify(data),
					dataType: 'json',
					success: function(re){

						var data = [], key = []
						for(var i in re.rspBody.data){
							var v = re.rspBody.data[i]
							key.push(i)
							data.push(v)
						}

						// 基于准备好的dom，初始化echarts实例
						var myChart = echarts.init(document.getElementById('tab2_' + who))

						// 指定图表的配置项和数据
						var option = {
							grid: {
								top: '5%',
								left: '0%',
								right: '0%',
								bottom: '0%',
								containLabel: true
							},
							color: ['#FAC858'],
							xAxis: {
								data: key,
								axisLabel: {
									textStyle: {
										color: '#fff',
									},
								},
							},
							yAxis: {
								axisLabel: {
									textStyle: {
										color: '#fff',
									},
								},
							},
							series: [{
								name: '销量',
								type: 'bar',
								data: data
							}]
						}

						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option)

					}
				})

			}

			else if(who == '地区分布'){

				var data = {
					reqHead:
					{
						clientType: 1,
						format: "json",
						version: "1.0",
						sign: "UCR1fIQ9lyUCR1fIQ9lyUCR1fIQ9lyUCR1y"
					},
					reqBody: {
						mchId:		LS.mchId,
						startTime:	LS.startTime,
						endTime:	LS.endTime,
					}
				}

				$.ajax({
					type:	'POST',
					url:	api + 'activitySummaryOfArea/interface',
					data:	JSON.stringify(data),
					dataType: 'json',
					success: function(re){

						var data = [], key = []
						for(var i in re.rspBody.data){
							var v = re.rspBody.data[i]
							key.push(i)
							data.push(v)
						}

						// 基于准备好的dom，初始化echarts实例
						var myChart = echarts.init(document.getElementById('tab2_' + who))

						// 指定图表的配置项和数据
						var option = {
							grid: {
								top: '5%',
								left: '0%',
								right: '0%',
								bottom: '0%',
								containLabel: true
							},
							color: ['#FAC858'],
							xAxis: {
								data: key,
								axisLabel: {
									textStyle: {
										color: '#fff',
									},
								},
							},
							yAxis: {
								axisLabel: {
									textStyle: {
										color: '#fff',
									},
								},
							},
							series: [{
								name: '销量',
								type: 'bar',
								data: data
							}]
						}

						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option)

					}
				})

			}

		},

		黑名单预警get(){

			var that = this

			var data = {
				reqHead:
				{
					clientType: 1,
					format: "json",
					version: "1.0",
					sign: "UCR1fIQ9lyUCR1fIQ9lyUCR1fIQ9lyUCR1y"
				},
				reqBody: {
					mchId:		LS.mchId,
					startTime:	LS.startTime,
					endTime:	LS.endTime,
				}
			}

			$.ajax({
				type:	'POST',
				url:	api + 'blacklistEarlyWarn/interface',
				data:	JSON.stringify(data),
				dataType: 'json',
				success: function(re){

					that.黑名单预警 = re.rspBody.list

				}
			})

		},

	},
	mounted(){
		that = this

		console.log('vue is ready')


		// 如果 date_list 里面含今天，选中今天
		var date = new Date()

		today = date.getFullYear()
		+ '-' +
		(
			Array(2).join('0') + (date.getMonth() + 1)
		).slice(-2)
		+ '-' +
		(
			Array(2).join('0') + date.getDate()
		).slice(-2)


		for(var i in this.date_list){

			if(today == this.date_list[i]){
				this.date = today
			}
		}

		this.实时get()
		this.tab1_echarts()
		this.tab2_echarts()
		this.黑名单预警get()

		setInterval(function(){
			that.实时get()
			that.tab1_echarts()
		}, 3000)
		
		setInterval(function(){
			that.tab2_echarts()
			that.黑名单预警get()
		}, 180000)
	}
})
</script>

</body>
</html>